<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Problem</title>
    <style>
        body { margin: 20px; font-family: sans-serif; }
        canvas { border: 1px solid #eee; }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="750" height="500"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Helper Functions ---

    function drawArrow(context, fromx, fromy, tox, toy) {
        const headlen = 8;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        context.beginPath();
        context.moveTo(fromx, fromy);
        context.lineTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        context.moveTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        context.stroke();
    }

    function drawHatching(context, x, y, w, h) {
        context.save();
        context.beginPath();
        context.rect(x, y, w, h);
        context.stroke(); // Draw the rectangle border
        context.clip();
        
        const step = 7;
        context.beginPath();
        for (let i = 0; i < w + h; i += step) {
            context.moveTo(x + i, y);
            context.lineTo(x, y + i);
        }
        context.stroke();
        context.restore();
    }

    // --- Style Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    const regularFont = '20px "Times New Roman", serif';
    const italicFont = 'italic 20px "Times New Roman", serif';
    
    // --- 1. Draw the Diagram (Fig. 1.19) ---
    const diaX = 200, diaY = 40;
    const gasW = 150, gasH = 80;
    const wallT = 10;
    
    ctx.lineWidth = 2;
    
    // Draw cylinder walls
    drawHatching(ctx, diaX, diaY, wallT, gasH + 2 * wallT); // Left wall
    drawHatching(ctx, diaX, diaY, gasW + wallT, wallT); // Top wall
    drawHatching(ctx, diaX, diaY + gasH + wallT, gasW + wallT, wallT); // Bottom wall

    // Draw piston
    const pistonX = diaX + wallT + gasW;
    const pistonY = diaY + wallT;
    drawHatching(ctx, pistonX, pistonY, wallT, gasH);
    
    ctx.lineWidth = 1.5;

    // Draw text inside
    ctx.font = italicFont;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText("p, V, T", diaX + wallT + 15, diaY + wallT + 15);
    ctx.fillText("U, S", diaX + wallT + 15, diaY + wallT + 40);

    // Draw external temperature T
    ctx.textBaseline = 'middle';
    ctx.fillText("T", diaX - 25, diaY + wallT + gasH/2);
    ctx.textAlign = 'center';
    ctx.fillText("T", diaX + (gasW + wallT)/2, diaY + 2*wallT + gasH + 15);

    // Draw arrows and labels
    ctx.font = regularFont;
    const arrowStartX = pistonX + wallT + 10;
    const arrowEndX = arrowStartX + 100;
    const arrowBaseY = pistonY + gasH / 2;

    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    // +ΔV group
    drawArrow(ctx, arrowStartX, arrowBaseY - 15, arrowEndX, arrowBaseY - 15);
    drawArrow(ctx, arrowStartX, arrowBaseY, arrowEndX, arrowBaseY);
    ctx.fillText("+ΔV", arrowEndX + 10, arrowBaseY - 7.5);

    // -ΔV group
    drawArrow(ctx, arrowEndX, arrowBaseY + 20, arrowStartX, arrowBaseY + 20);
    ctx.fillText("-ΔV", arrowEndX + 10, arrowBaseY + 20);

    // Fig caption
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText("Fig. 1.19.", diaX + (gasW + 2 * wallT) / 2, diaY + 2 * wallT + gasH + 35);


    // --- 2. Draw the list of processes ---
    const listX = 80, listY = 230;
    const lineHeight = 30;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.font = regularFont;

    const processes = [
        "(+ΔV) (slow) (conduct)",
        "(+ΔV) (slow) (insulate)",
        "(+ΔV) (fast) (insulate)",
        "(+ΔV) (fast) (conduct)",
        "(-ΔV) (fast) (conduct)"
    ];

    for (let i = 0; i < processes.length; i++) {
        const yPos = listY + i * lineHeight;
        ctx.textAlign = 'right';
        ctx.fillText(`${i + 1}.`, listX, yPos);
        ctx.textAlign = 'left';
        ctx.fillText(processes[i], listX + 10, yPos);
    }


    // --- 3. Draw the table ---
    const tableX = 420, tableY = 230;
    const cellW = 70, cellH = 30;
    ctx.lineWidth = 1;

    // Draw grid
    ctx.beginPath();
    // Vertical lines
    for (let i = 0; i <= 4; i++) {
        ctx.moveTo(tableX + i * cellW, tableY);
        ctx.lineTo(tableX + i * cellW, tableY + 6 * cellH);
    }
    // Horizontal lines
    for (let i = 0; i <= 6; i++) {
        ctx.moveTo(tableX, tableY + i * cellH);
        ctx.lineTo(tableX + 4 * cellW, tableY + i * cellH);
    }
    ctx.stroke();

    // Draw header text
    ctx.font = regularFont;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const headers = ["ΔT", "ΔU", "ΔS", "Δp"];
    for (let i = 0; i < headers.length; i++) {
        ctx.fillText(headers[i], tableX + (i + 0.5) * cellW, tableY + 0.5 * cellH);
    }


    // --- 4. Draw "(Wisconsin)" text ---
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.font = regularFont;
    ctx.fillText("(Wisconsin)", tableX + 4 * cellW, tableY + 6 * cellH + 10);

</script>

</body>
</html>